<template>
  <div>
    <div>事件处理器</div>
    <div>----------------------------------------------------------</div>
    <!--   v-on    -->
    <div id="test1">
        <button v-on:click="counter+= 1">增加1</button>
        <p>这个按钮被点击了 {{ counter }} 次。</p>
    </div>


    <div>----------------------------------------------------------</div>
    <!--  'greet'是在下面定义的方法名称   -->
    <div id='test2'>
        <button @click="greet">Greet</button>
    </div>

    <div>----------------------------------------------------------</div>
    <!--  stop阻止事件冒泡   -->
    <div id='test3' @click="doThis2">
        <button @click.stop="doThis1">doThis</button>
    </div>


    <div>----------------------------------------------------------</div>
    <!--     -->
  </div>
</template>
<script>
export default {
    data(){
        return{
            counter:0
        }
    },
    methods:{
        greet() {  
            this.counter +=1;
        },
        doThis2(){
            alert('doThis2');
        },
        doThis1(){
            alert('doThis1');
        }
    },
    mounted(){
        // 接收 demo13链接传递参数
        alert(this.$route.params.userId)
    }

}
</script>






